<template #default="scope"><!-- 居家检测 /查看详情-->
    <div class="quan">
     <div class="ju">
        <span>居家检测/查看详情</span>
     </div>
     <div class="content">
        <div class="zhong" >
            <span class="nei">来源：</span>
            <span>{{ contnei.source }}</span><br>
            <span class="nei">姓名：</span>
            <span>{{ contnei.name }}</span><br>
            <span class="nei">性别:</span>
            <span>{{ contnei.sex }}</span><br>
            <span class="nei">身份证号:</span>
            <span>{{ contnei.idCard }}</span><br>
            <span class="nei">联系方式:</span>
            <span>{{ contnei.phoneNum }}</span><br>
            <span class="nei">籍贯省份:</span>
            <span>{{ contnei.residenceAddress }}</span><br>
            <span class="nei">籍贯地址:</span>
            <span>{{ contnei.nativeAddress }}</span><br>
            <span class="nei">现居住地:</span>
            <span>{{ contnei.nowAddress }}</span><br>
            <span class="nei">详细地址:</span>
            <span>{{ contnei.address }}</span><br>
            <span class="nei">监测开始日期:</span>
            <span>{{ contnei.startDate }}</span><br>
            <span class="nei">监测结束日期:</span>
            <span>{{ contnei.removeDate }}</span><br>
            <span class="nei">备注:</span>
            <span>无</span><br>
            <div class="img">
            <img src="@/assets/chen/xie.svg" alt="">
            <span class="jian">{{status}}</span>
            </div>
            <div class="wei" >
                
                <router-link to="/meir"><el-button >返回</el-button></router-link>
                <router-link :to="{name:'bianju', query: {id:jie}}"><el-button class="bian2"  type="primary">编辑</el-button></router-link>
                <el-button type="primary" @click="san()">删除</el-button>
                <router-link :to="{name:'miqie', query: {id:jie}}"><el-button type="primary">密切跟踪</el-button></router-link>
                <el-button type="primary" class="jie1" @click="show()">解除监测</el-button>
            
            
            
            
        </div>
        </div>
        
        
     </div>
     
     
    

    </div>
    <!-- 解除密切的模态框 -->
    <teleport to="body" >
                    <!-- to后面的地址还可以是 html  或者其他 div等 -->
                    <!-- 表示将teleport包裹的这个div,移动到html这个结构中 -->
            <div class="mask" v-if="isShow.showDialog">
                <div class="dialog1">
                            <h2>是否确认解除</h2>
                        
                            
                            <el-button class="dialog-btn" @click="hidden" type="primary" round>返回</el-button>
                            <el-button class="dialog-btn" @click="hidden2" type="primary" round>确认</el-button>
                </div>
            </div>
    </teleport>
    
    <teleport to="body" >
        <div class="que" v-show="que">
            <h1>确定删除？</h1>
            <div>
            <button @click="fan">返回</button>
            <button  @click="que1">确定</button>
             </div>
            
    </div>
    </teleport>
</template>

<script>
import { defineComponent,onBeforeMount,reactive,ref,toRefs } from 'vue'
import {useRoute} from 'vue-router'
import axios from '@/views/chen/http'
export default defineComponent({
    name:"cha",
    setup(){
        const route=useRoute()
        // const jie=route.query.key //接收跳转参数
        // console.log(jie);
        // const contnei={
        //     lai:'手动登记',//来源：
        //     name:"张三",//姓名
        //     gender:"男",//性别
        //     shen:"2930511229321",//身份证号
        //     phone:"13022568213",//联系方式
        //     ji:"四川省 成都市 龙泉驿区",//籍贯省份
        //     guan:"龙泉大道888号",//籍贯地址
        //     ju:"四川省 成都市 龙泉驿区",//现居住地
        //     xiang:"龙泉大道888号",//详细地址
        //     kai:"2022-11-12 13:00",//检测开始日期
        //     jie:"2022-13 04:00",//检测结束日期
        //     bei:"无"//备注
        // }
        let jie=route.query.id;
        let status=route.query.jie;
        console.log('-----');
        console.log(status);
        let a=reactive({
            contnei:[{}]
        });
        //删除
        let que=ref(false);
        let fan=(()=>{
            que.value=false
           });
        let que1=(()=>{
            que.value=false
            axios({
            method:"post",url:"dailyAddition/deleteContactById",
            params:{id:san2}
           }).then((res)=>{
            console.log('删除成功');
           })
           });
        let san2=ref()
        const san=(obj)=>{ //删除姓名的内容
            san2=obj
            que.value=true
           }
        //密切模态框
        let idd=ref()
        let isShow = reactive({
            showDialog: false,//模态框
        });
        async function show(obj) {
            isShow.showDialog = true; //激活模态框
            idd=obj.id
            return idd
        };
        function hidden() {
            isShow.showDialog = false; // 返回关闭模态框
        };
        function hidden2(){ //进行数据导入
            
                
            console.log(idd);
            axios({
            method:"post",url:"dailyAddition/alterStatus",
            params:{id:jie}
           }).then((res)=>{
            
            let b=res.data.data[0];
            a.contnei=b
            console.log('解除成功');
            
            
           })  
        };
        onBeforeMount(async()=>{
            //展示全部数据
            await  axios({
            method:"get",url:"dailyAddition/dayAddShowDetail",
            params:{id:jie}
           }).then((res)=>{
            
            let b=res.data.data[0];
            a.contnei=b
            // console.log(b);
            
            
           })
        })
        return{
            ...toRefs(a),route,jie,status,
            que,fan,que1,san2,san,//删除
            idd,isShow,show,hidden,hidden2
        
        }
    }
})


</script>

<style scoped lang="less">
.hh{
    width: 1136px;
    height: 800px;
    background-color: rgb(255, 255, 255);
    display: flex;
    justify-content: center;
}
.quan{
    width: 100%;
    height: 700px;
}
// 设置表头样式
/deep/ .el-table th{
    background-color: #f9f9f9 !important; 
    color: black;
    Font-weight:400;// 字体粗细
    
}
.ju{
    padding: 20px 0px 20px 0px;
}
.head{
    background-color: #ffffff;
    width: 1136px;
    height: 172px !important;
}
.zhong{
    position: relative;;
    width: 100%;
    height: 100%;
    padding:30px 0px 50px 20px;
    background-color: #ffffff;
}
.content{
    width: 100%;
   

}
.nei{
    display:inline-block ;
    width: 91px;
    margin: 0px 20px 10px 20px;
    
}
.zhong span{
    font-size:14px
}
.img{
    position: absolute;
    top: 0px;
    right: 0px;
}
.jian{
    transform:rotate(39deg);
    position: absolute;
    top:32px;
    right:25px;
    color: #f9f9f9;
}
.wei{
    width: 100%;
    text-align:center;
    padding-top:20px
}
.wei a{
    margin-left:20px
}
.bian2{
    margin-right:18px
}
.jie1{
    margin-left:20px
}
.mask {
    /* 创建遮罩层 */
    position: fixed;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1000;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}
.dialog1 {
    text-align: center;
    width: 300px;
    height: 200px;
    background: rgb(255, 255, 255);
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 10px;
    /* top和left这个两个50%表示的是，这个弹框的顶部到页面的顶部，弹框的左侧到页面的左侧 */
    transform: translate(-50%, -50%);

    /* 这个偏移表示的是，偏移这个div框自身宽度和高度的50% */
    span {
        display: inline;
        width: 100px;
        text-align: right;
    }
    h2{
        margin-top:20px
    }
    .dialog-btn{
        margin-top:90px
    }
}
.que{
    position: fixed;
    top:calc(50% - 200px);
    left:calc(50% - 150px);
    width: 300px;
    height: 400px;
    background-color: #f0dddd;
    z-index:2000;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    h1{
        margin-bottom:30px
    }
    button{
        margin-left:20px
    }
}
</style>